<template>
  <div class="app-container">

    <div class="toolbar-section">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <search-bar :form="queryParams" @sub="getList"></search-bar>
        </el-col>
        <right-toolbar @queryTable="Refresh"></right-toolbar>
      </el-row>
    </div>
    <div class="table-section">
      <vxe-table height="auto" ref="table" :data="tableData.list" :loading="tableData.loading">
        <vxe-column type="seq" width="55" align="center" />
        <vxe-column field="state" width="80" title="状态" align="center">
          <template #default="{ row }">
            <dict-tag :options="asset_state" :value="row.state" />
          </template>
        </vxe-column>
        <vxe-column width="120" title="图片" align="center" field="number">
          <template #default="scope">
            <el-tooltip v-if="scope.row.imgUrl"
                        class="box-item"
                        effect="dark"
                        placement="right-start"
            >
              <template #content>
                <img alt="" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
              </template>
              <img alt="" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
            </el-tooltip>
            <span v-else>没有图片</span>
          </template>
        </vxe-column>
        <vxe-column width="120" title="资产编码" align="center" field="number"/>
        <vxe-column width="180" title="资产名称" align="center" field="name"/>
        <vxe-column width="120" title="资产分类" align="center" field="categoryName"/>
        <vxe-column width="120" title="品牌" align="center" field="brand"/>
        <vxe-column width="120" title="型号" align="center" field="model"/>
        <vxe-column width="120" title="供应商" align="center" field="maintenance.supplier"/>
        <vxe-column width="120" title="供应商联系人" align="center" field="maintenance.supplierContact"/>
        <vxe-column width="120" title="联系电话" align="center" field="maintenance.contactPhone"/>
        <vxe-column width="120" title="负责人" align="center" field="maintenance.userName"/>
        <vxe-column width="120" title="保养到期时间" align="center" field="maintenance.deadlineTime"/>
        <vxe-column width="120" title="折旧期限（月）" align="center" field="maintenance.depreciation"/>
        <vxe-column width="120" title="购置方式" align="center" field="buyWay"/>
        <vxe-column width="180" title="购置时间" align="center" field="buyTime">
          <template #default="scope">
            <span>{{ scope.row.buyTime }}</span>
          </template>
        </vxe-column>
        <vxe-column width="120" title="购置金额" align="center" field="buyPrice"/>
        <vxe-column width="120" title="使用人" align="center" field="userName"/>
        <vxe-column width="120" title="管理员" align="center" field="adminName"/>

        <vxe-column width="150" title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="scope">

            <el-button
                size="small"
                link
                type="primary"
                @click="handleUpdate(scope.row)"
            >维保信息</el-button>

          </template>
        </vxe-column>
      
      </vxe-table>
      
    </div>
    <div class="pagination-section">
      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />
    </div>

    

    

    <edit ref="editDialog" @sub="getList"></edit>

  </div>
</template>

<script setup>

import api from './api.js'
import Edit from './edit'
import SearchBar from "./SearchBar.vue";


const { proxy } = getCurrentInstance();
const { asset_state } = proxy.useDict("asset_state");

const editDialog = ref();

// 遮罩层
const loading = ref(false);

const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  state: null,
  field: 'number',
  value: null,
  pageNum: 1,
  pageSize: 10
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {

  loading.value = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq).then(response => {
    const { records, total } = response
    tableData.list = records;
    tableData.paging.total = total;
    tableData.loading = false;

  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

function Refresh() {
  getList()
  proxy.$message.success("刷新成功");  
}
function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}


/** 修改按钮操作 */
function handleUpdate(row) {
  editDialog.value.open(row);
}

// 页面打开后获取列表数据
onMounted( async () => {
  await getList();
});

</script>
